// import { IReqCategory } from "@/api/user/model/tradrmark";
import { Card, Form, Select } from "antd";
import React, { useEffect } from "react";
import './index.less'
import { useAppDispatch, useAppSelector } from '@/app/hooks'
import { asyncCategoryList, asyncCategory2List, asyncCategory3List } from "@/app/categoryslice"
export default function GoodsAttr() {
  const { Option } = Select;
  const [form] = Form.useForm()
  // 修改一级分类时绑定的change事件
  const handleChange = (value: number) => {
    // 点击一级分类清空二级分类和三级分类
    form.setFieldsValue({
      cate2: "",
      cate3: ""
    })
    // 二级分类
    dispatch(asyncCategory2List(value))
  };
  // 修改二级分类时绑定的change事件
  const handleChange1 = (value: number) => {
    // 点击一级分类清空三级分类
    form.setFieldsValue({
      cate3: ""
    })
    // 三级分类
    dispatch(asyncCategory3List(value))
  };
  let dispatch = useAppDispatch()
  let state = useAppSelector((state) => {
    return state
  })

  useEffect(() => {
    // 一级分类
    dispatch(asyncCategoryList())
  }, [])

  return (
    <Card>
      <Form form={form} layout="inline">
        <Form.Item label="一级分类">

          <Select placeholder="请选择一级分类"
            style={{ width: 250 }}
            onChange={handleChange}
          // options={state.gategory.category1list}
          >
            {
              state.gategory.category1list.map((item) => {
                return (<Option value={item.id}>{item.name}</Option>)
              })
            }

          </Select>
        </Form.Item>
        <Form.Item name='cate2' label="二级分类">

          <Select
            placeholder="请选择二级分类"
            style={{ width: 250 }}
            onChange={handleChange1}
          >
            {
              state.gategory.category2list.map((item) => {
                return (<Option value={item.id}>{item.name}</Option>)
              })
            }
          </Select>
        </Form.Item>

        <Form.Item name='cate3' label="三级分类">

          <Select
            style={{ width: 250 }}
            placeholder="请选择三级分类"
          >
            {
              state.gategory.category3list.map((item) => {
                return (<Option value={item.id}>{item.name}</Option>)
              })
            }
          </Select>
        </Form.Item>


      </Form>
    </Card>

  );
}
